<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Coder-nav-定时任务</title>
    <script src="/js/jquery/jquery.js"></script>
    <script src="/js/jquery/adsorb.js"></script>
    <script src="/js/vue/vue.js"></script>
    <script src="/js/vue/axios.js"></script>
    <script src="/js/vue/element-ui.js"></script>
    <script src="/js/codemirror/codemirror.js"></script>
    <script src="/js/codemirror/show-hint.js"></script>
    <script src="/js/codemirror/mode/javascript.js"></script>
    <script src="/js/markdown/marked.js"></script>
    <script src="/js/util.js"></script>
    <style>
        @import url("/css/vue/element-ui.css");
        @import url("/css/codemirror/codemirror.css");
        @import url("/css/codemirror/show-hint.css");
        @import url("/css/codemirror/theme/material.css");
        #main {
            position: absolute;
            width: 65%;
            height: 1px;
            top: 50px;
            left: 50%;
            transform: translate(-50%, 0);
        }
        .el-table__body-wrapper::-webkit-scrollbar {
            display: none;
        }
        .CodeMirror {
            font-family: "Consolas", monospace;
            line-height: 1.5;
            font-size: 16px;
            height: 300px;
            padding: 10px;
            margin-top: 5px;
            margin-bottom: 5px;
            border-radius: 5px;
        }
        #code::-webkit-scrollbar {
            display: none;
        }
        .showOverTooltip{
            display:-webkit-box;
            text-overflow:ellipsis;
            overflow:hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient:vertical;
        }
    </style>
</head>
<body>
<div id="app">
    <el-page-header @back="goBack" style="position: fixed;z-index: 999;">
        <template #content>
            <el-select ref="selectRef" v-model="selectedState" size="small" style="width: 155px">
                <el-option label="🍡&emsp;导航主页" value="0"><el-link href="/">🍡&emsp;导航主页</el-link></el-option>
                <el-option label="📌&emsp;记事本" value="1"><el-link href="/memo">📌&emsp;记事本</el-link></el-option>
                <el-option label="💰&emsp;记账本" value="2"><el-link href="/cash">💰&emsp;记账本</el-link></el-option>
                <el-option label="🌈&emsp;动态页面" value="3"><el-link href="/page">🌈&emsp;动态页面</el-link></el-option>
                <el-option label="⏱️&emsp;定时任务" value="4"><el-link href="/task">⏱️&emsp;定时任务</el-link></el-option>
                <el-option label="⚙️&emsp;个人设置" value="5"><el-link href="/setting">⚙️&emsp;个人设置</el-link></el-option>
                <el-option label="📖&emsp;帮助手册" value="6"><el-link href="/readme">📖&emsp;帮助手册</el-link></el-option>
                <el-option label="🛠️&emsp;接口文档" value="7"><el-link href="/doc.html">🛠️&emsp;接口文档</el-link></el-option>
                <el-option label="↪️&emsp;退出登录" value="-1" @click.native="clearToken"></el-option>
            </el-select>
        </template>
    </el-page-header>
    <div id="main" align="center">
        <template>
            <!-- 表格数据 -->
            <el-table :data="[{}].concat(tableData)"
                      border style="width: 1264px">

                <!-- 执行时间 -->
                <el-table-column align="center" prop="actionTime" label="执行时间" width="200" fixed="left">
                    <template slot-scope="scope">
                        <el-date-picker value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" v-if="scope.$index===0" v-model="actionTime" type="datetime" placeholder="执行时间" style="width: 175px"></el-date-picker>
                        <el-date-picker value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" v-if="scope.row.id > 0 && scope.row.actionTime != null" v-model="scope.row.actionTime" type="datetime" style="width: 175px" readonly></el-date-picker>
                        <el-date-picker value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" v-if="scope.row.id > 0 && scope.row.actionTime == null" v-model="scope.row.actionTime" type="datetime" style="width: 175px" disabled></el-date-picker>
                    </template>
                </el-table-column>

                <!-- 标题 -->
                <el-table-column prop="title" label="标题" width="200">
                    <template slot-scope="scope">
                        <el-input v-if="scope.$index===0" class="add" v-model="title" placeholder="标题" style="width: 175px"></el-input>
                        <span style="padding-left: 15px">{{scope.row.title}}</span>
                    </template>
                </el-table-column>

                <!-- 内容 -->
                <el-table-column prop="context" label="内容" width="280" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-input v-if="scope.$index===0" class="add" type="textarea" :rows="1" v-model="context" placeholder="脚本内容请在详情中编写~~" style="width: 250px;" disabled="disabled"></el-input>
                        <span class="showOverTooltip" style="padding-left: 15px" v-html=scope.row.context></span>
                    </template>
                </el-table-column>

                <!-- 执行方法 -->
                <el-table-column align="center" prop="actionFunction" label="执行方法" clearable width="150">
                    <template slot-scope="scope">
                        <el-select v-if="scope.$index===0" v-model="actionFunction" style="width: 125px">
                            <el-option v-for="item in functionList" :key="item.key" :label="item.key" :value="item.value"/>
                        </el-select>
                        <el-tag v-if="scope.$index !== 0" type="warning">
                            {{scope.row.actionFunctionDesc}}
                        </el-tag>
                    </template>
                </el-table-column>

                <!-- 排序 -->
                <el-table-column align="center" prop="actionFunction" label="排序" clearable width="160">
                    <template slot-scope="scope">
                        <el-input-number v-if="scope.$index===0" class="add" v-model="sort" size="small" controls-position="right" :min="0"></el-input-number>
                        <span v-html=scope.row.sort></span>
                    </template>
                </el-table-column>

                <!-- 操作 -->
                <el-table-column align="center" prop="id" label="操作" fixed="right" min-width="155">
                    <template slot-scope="scope">
                        <!-- 新增 -->
                        <el-button v-if="scope.$index===0"
                                   plain
                                   size="mini"
                                   type="info"
                                   @click="clearAddParams">重置</el-button>
                        <el-button v-if="scope.$index===0"
                                   size="mini"
                                   type="success"
                                   @click="add">新增</el-button>
                        <!-- 表格 -->
                        <el-button v-if="scope.row.id > 0"
                                   plain
                                   size="mini"
                                   type="info"
                                   @click="del(scope.row.id)">删除</el-button>
                        <el-button v-if="scope.row.id > 0"
                                   plain
                                   size="mini"
                                   type="primary"
                                   @click="getInfo(scope.row.id)">详情</el-button>
                    </template>
                </el-table-column>

            </el-table>

            <!-- 表单 -->
            <el-drawer :visible.sync="infoDrawer" title="详情" :append-to-body="true" :size="'50%'">
                <template>
                    <el-form label-width="auto" style="padding-left: 35px; padding-right: 30px">

                        <!-- 标题 -->
                        <el-form-item label="标题">
                            <el-input class="add" v-model="infoTitle" placeholder="标题"></el-input>
                        </el-form-item>

                        <!-- 方法 -->
                        <el-form-item label="方法">
                            <el-select v-model="infoActionFunction">
                                <el-option v-for="item in functionList" :key="item.key" :label="item.key" :value="item.value"/>
                            </el-select>
                            <el-tooltip placement="top" effect="dark">
                                <i class="el-icon-warning-outline" style="padding-left: 10px"></i>
                                <div slot="content">
                                    1.Markdown: 推送的消息将是渲染 Md 后的 Html 文本<br/><br/>
                                    2.Java: 执行代码逻辑后使用 System.out.println 输出结果<br/><br/>
                                    3.PHP: 执行代码逻辑后使用 echo 输出结果<br/><br/>
                                    4.JavaScript: 执行代码后使用 console.log 输出结果<br/><br/>
                                </div>
                            </el-tooltip>
                        </el-form-item>

                        <!-- 执行时间 -->
                        <el-form-item label="执行时间">
                            <el-date-picker value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" v-model="infoactionTime" type="datetime" placeholder="执行时间"></el-date-picker>
                            <el-tooltip placement="top" effect="dark">
                                <i class="el-icon-warning-outline" style="padding-left: 10px"></i>
                                <pre slot="content" style="font-family: 'Consolas'; font-size: 14px;">
1.执行时间: 任务执行时间，为空则不执行

2.下次执行: 此次任务执行后，需要累加的时间

  如: 年  月  日  时  分
      0   0   0   0   1

  若此次执行时间: 2025-06-28 12:09
  则下次执行时间: 2025-06-28 12:10

  注: 若无下次执行时间，执行任务时间将会被置空

3.适用星期: 任务执行星期配置，若不设置则不限制
</pre>
                            </el-tooltip>
                        </el-form-item>

                        <!-- 内容 -->
                        <el-form-item label="内容">
                            <textarea id="code" name="code"></textarea>
                        </el-form-item>

                        <!-- 排序 -->
                        <el-form-item label="排序">
                            <el-input-number class="add" v-model="infoSort" size="mini"></el-input-number>
                            <el-tooltip placement="top" effect="dark">
                                <i class="el-icon-warning-outline" style="padding-left: 10px"></i>
                                <div slot="content">
                                    数值越大排序越靠前<br/>
                                </div>
                            </el-tooltip>
                        </el-form-item>

                        <!-- 下次执行 -->
                        <el-form-item label="下次执行">
                            <table style="text-align: center">
                                <tr>
                                    <td><el-tag style="width: 90px" type="primary">年-Year</el-tag></td>
                                    <td><el-tag style="width: 90px" type="primary">月-Month</el-tag></td>
                                    <td><el-tag style="width: 90px" type="primary">日-Day</el-tag></td>
                                    <td><el-tag style="width: 90px" type="info">时-Hour</el-tag></td>
                                    <td><el-tag style="width: 90px" type="info">分-Minute</el-tag></td>
                                </tr>
                                <tr>
                                    <td><el-input-number class="add" v-model="infoYear" size="small" controls-position="right" style="width: 90px" :min="0"></el-input-number></td>
                                    <td><el-input-number class="add" v-model="infoMonth" size="small" controls-position="right" style="width: 90px" :min="0"></el-input-number></td>
                                    <td><el-input-number class="add" v-model="infoDay" size="small" controls-position="right" style="width: 90px" :min="0"></el-input-number></td>
                                    <td><el-input-number class="add" v-model="infoHour" size="small" controls-position="right" style="width: 90px" :min="0"></el-input-number></td>
                                    <td><el-input-number class="add" v-model="infoMinute" size="small" controls-position="right" style="width: 90px" :min="0"></el-input-number></td>
                                </tr>
                            </table>
                        </el-form-item>

                        <!-- 适用星期 -->
                        <el-form-item label="适用星期">
                            <table style="text-align: center">
                                <tr>
                                    <td><el-checkbox-button v-model="week0" label="周日" class="week"></el-checkbox-button></td>
                                    <td><el-checkbox-button v-model="week1" label="周一" class="week"></el-checkbox-button></td>
                                    <td><el-checkbox-button v-model="week2" label="周二" class="week"></el-checkbox-button></td>
                                    <td><el-checkbox-button v-model="week3" label="周三" class="week"></el-checkbox-button></td>
                                    <td><el-checkbox-button v-model="week4" label="周四" class="week"></el-checkbox-button></td>
                                    <td><el-checkbox-button v-model="week5" label="周五" class="week"></el-checkbox-button></td>
                                    <td><el-checkbox-button v-model="week6" label="周六" class="week"></el-checkbox-button></td>
                                </tr>
                            </table>
                        </el-form-item>

                        <!-- 参考时间 -->
                        <el-form-item label="参考时间">
                            <pre style="margin: 0; padding: 0; color: darkgoldenrod; font-weight: bold">{{infoNextActionTime}}</pre>
                        </el-form-item>

                        <!-- 保存 -->
                        <el-form-item>
                            <el-button size="mini" type="primary" @click="edit">保存</el-button>
                            <el-button size="mini" type="warning" @click="debug">测试</el-button>
                            <el-button size="mini" type="info" plain @click="getInfo(infoId)">重置</el-button>
                        </el-form-item>

                    </el-form>
                </template>
            </el-drawer>

            <!-- 分页 -->
            <el-pagination align='right' layout="total, sizes, prev, pager, next"
                           @size-change="changeSize"
                           @current-change="changeCur"
                           :current-page="pageIndex" :page-size="pageSize" :total="totalCount">
            </el-pagination>

            <br/><br/><br/>

        </template>
        <br/><br/>
    </div>
</div>
<script th:inline="javascript">
    // 表格
    var curDate = new Date();
    var Main = {
        data() {
            return {
                selectedState: '4', infoDrawer: false,
                // 新增
                actionTime: null, title: '', context: '', sort: 0, actionFunction: 'NavTaskNoticeAction',
                // 详情
                infoId: null, infoUserId: null, infoactionTime: null, infoTitle: null, infoContext: null, infoSort: 0, infoYear: 0,
                infoMonth: 0, infoDay: 0, infoHour: 0, infoMinute: 0, infoActionFunction: null, infoNextActionTime: '',
                // 表格
                pageIndex: 1, pageSize: 10, totalCount: 0, tableData: [], functionList: [],
                week0: false, week1: false, week2: false, week3: false, week4: false, week5: false, week6: false,
            }
        },
        mounted:function() {
            // 检查Token
            this.checkToken()
        },
        methods: {
            initData() {
                this.getPage()
            },
            // 检查Token
            checkToken() {
                localStorage.setItem('jump', window.location.href);
                axios.get('/login/checkToken', {
                    params: {
                        token: localStorage.getItem('token')
                    }
                }).then((response) => {
                    if(!response.data.data) {
                        localStorage.setItem('token', '')
                        window.location.href = '/login'
                        return;
                    }
                    this.getFunctionList()
                    this.initData()
                });
            },
            // 返回
            goBack() {
                history.back()
            },
            // 查询参数
            getParams() {
              return {
                  pageIndex: this.$data.pageIndex,
                  pageSize: this.$data.pageSize,
              };
            },
            // 重置新增参数
            clearAddParams() {
                this.$data.title = null
                this.$data.context = null
            },
            // 分页
            getPage() {
                this.$loading()
                axios.post('/task/getPage', this.getParams(), {
                    headers: {
                        token: localStorage.getItem('token')
                    }
                }).then((response) => {
                    this.$data.pageIndex = response.data.data.pageIndex;
                    this.$data.pageSize = response.data.data.pageSize;
                    this.$data.totalCount = response.data.data.totalCount;
                    this.$data.tableData = response.data.data.data;
                    for(var i = 0; i < this.$data.tableData.length; i++) {
                        this.$data.tableData[i].context = marked.parse('```\n' + this.$data.tableData[i].context + '\n```');
                    }
                    this.$loading().close()
                }).catch((response) => {
                    this.$loading().close()
                    this.$message.error(response)
                });
            },
            // 新增
            add() {
                var actionTime = null
                if(this.$data.actionTime !== null) {
                    actionTime = formatDate(new Date(this.$data.actionTime))
                }
                axios.post('/task/save', {
                    title: this.$data.title,
                    context: this.$data.context,
                    actionFunction: this.$data.actionFunction,
                    sort: this.$data.sort,
                    actionTime: actionTime,
                }, {
                    headers: {
                        token: localStorage.getItem('token')
                    }
                }).then((response) => {
                    if(response.data.code === 200) {
                        this.clearAddParams()
                        this.initData()
                        this.$message.info('新增成功')
                    } else {
                        this.$message.error(response.data.msg)
                    }
                }).catch((response) => {
                    this.$message.error(response)
                });
            },
            // 编辑
            edit() {
                this.save(0)
            },
            debug() {
                this.save(1)
            },
            save(type) {
                this.$loading()
                var code = document.getElementById("code");
                var weeks = '';
                if(this.$data.week0) weeks += "0,";
                if(this.$data.week1) weeks += "1,";
                if(this.$data.week2) weeks += "2,";
                if(this.$data.week3) weeks += "3,";
                if(this.$data.week4) weeks += "4,";
                if(this.$data.week5) weeks += "5,";
                if(this.$data.week6) weeks += "6,";
                if(weeks !== '') {
                    weeks = weeks.substr(0, weeks.length - 1);
                }
                var actionTime = null
                if(this.$data.infoactionTime !== null) {
                    actionTime = formatDate(new Date(this.$data.infoactionTime))
                }
                var url = '';
                if(type === 0) {
                    url = '/task/save';
                }
                if(type === 1) {
                    this.$loading()
                    url = '/task/debug';
                }
                axios.post(url, {
                    id: this.$data.infoId,
                    title: this.$data.infoTitle,
                    context: code.val,
                    actionFunction: this.$data.infoActionFunction,
                    sort: this.$data.infoSort,
                    year: this.$data.infoYear,
                    month: this.$data.infoMonth,
                    day: this.$data.infoDay,
                    hour: this.$data.infoHour,
                    minute: this.$data.infoMinute,
                    weeks: weeks,
                    actionTime: actionTime,
                }, {
                    headers: {
                        token: localStorage.getItem('token')
                    }
                }).then((response) => {
                    if(response.data.code === 200) {
                        if(type === 0) {
                            this.initData()
                            // this.getInfo(this.$data.infoId)
                            this.$message.info('保存成功')
                        }
                        if(type === 1) {
                            this.$loading().close()
                            this.$message.info('消息推送成功')
                        }
                    } else {
                        this.$message.error(response.data.msg)
                    }
                }).catch((response) => {
                    this.$message.error(response)
                });
            },
            // 删除
            del(id) {
                this.$confirm('确认删除？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('/task/delete', {
                        params: {
                            id: id
                        },
                        headers: {
                            token: localStorage.getItem('token')
                        }
                    }).then((response) => {
                        this.initData()
                        this.$message.info('删除成功')
                    });
                }).catch((response) => {
                    this.$message.error(response)
                });
            },
            // 分页
            changeSize(number) {
                this.$data.pageSize = number
                this.initData()
            },
            // 分页
            changeCur(number) {
                this.$data.pageIndex = number
                this.initData()
            },
            // 详情
            getInfo(id) {
                this.$data.infoDrawer = true
                axios.get('/task/getInfo', {
                    params: {
                        id: id
                    },
                    headers: {
                        token: localStorage.getItem('token')
                    }
                }).then((response) => {
                    this.$data.infoId = response.data.data.id
                    this.$data.infoUserId = response.data.data.userId
                    this.$data.infoactionTime = response.data.data.actionTime
                    this.$data.infoTitle = response.data.data.title
                    this.$data.infoContext = response.data.data.context
                    this.$data.infoActionFunction = response.data.data.actionFunction
                    this.$data.infoSort = response.data.data.sort
                    this.$data.infoYear = response.data.data.year
                    this.$data.infoMonth = response.data.data.month
                    this.$data.infoDay = response.data.data.day
                    this.$data.infoHour = response.data.data.hour
                    this.$data.infoMinute = response.data.data.minute
                    this.$data.infoNextActionTime = response.data.data.nextActionTime
                    if(response.data.data.weeks !== '') {
                        var weeks = response.data.data.weeks.split(",");
                        this.$data.week0 = weeks.indexOf('0') !== -1;
                        this.$data.week1 = weeks.indexOf('1') !== -1;
                        this.$data.week2 = weeks.indexOf('2') !== -1;
                        this.$data.week3 = weeks.indexOf('3') !== -1;
                        this.$data.week4 = weeks.indexOf('4') !== -1;
                        this.$data.week5 = weeks.indexOf('5') !== -1;
                        this.$data.week6 = weeks.indexOf('6') !== -1;
                    } else {
                        this.$data.week0 = false;
                        this.$data.week1 = false;
                        this.$data.week2 = false;
                        this.$data.week3 = false;
                        this.$data.week4 = false;
                        this.$data.week5 = false;
                        this.$data.week6 = false;
                    }
                    // 代码块
                    var cs = document.getElementsByClassName("CodeMirror");
                    for(var i = 0; i < cs.length; i++) {
                        cs[i].parentNode.removeChild(cs[i]);
                    }
                    var code = document.getElementById("code");
                    var editor = CodeMirror.fromTextArea(code, {
                        lineNumbers: false,    // 显示行数
                        indentUnit: 4,         // 缩进单位为4
                        indentWithTabs: 4,     // 新行
                        styleActiveLine: true, // 当前行背景高亮
                        matchBrackets: true,   // 括号匹配
                        mode: "javascript",    // 设置编辑器语言为JavaScript
                        lineWrapping: false,   // 自动换行
                        theme: 'material',
                    });
                    if(response.data.data.context !== null) {
                        code.val = response.data.data.context
                        editor.setValue(response.data.data.context)
                    }
                    // 监听代码变化事件
                    editor.on("change", function(cm) {
                        code.val = cm.getValue();
                    });
                }).catch((response) => {
                    this.$message.error(response)
                });
            },
            getFunctionList() {
                axios.get('/task/getFunctionList', {
                    headers: {
                        token: localStorage.getItem('token')
                    }
                }).then((response) => {
                    this.$data.functionList = response.data.data;
                });
            },
            clearToken() {
                axios.get('/logout', {
                    params: {
                        token: localStorage.getItem('token')
                    }
                }).then((response) => {
                    localStorage.setItem('token', '')
                    this.checkToken()
                    this.$message.info("退出登录成功")
                })
            },
            jump(url) {
                window.open(url)
            },
        }
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#app');
</script>
</body>
</html>